<template>
  <div class="approval-container">
    <div>
      <p-radio-group
        v-model="form.approveStatus"
        class="radio-container"
        @change="handleRadioChange"
      >
        <span class="agree mr-15 poros-table-header-required">
          {{ approve }}
        </span>
        <!-- prettier-ignore -->
        <p-radio :value="true">
          同意
        </p-radio>
        <div v-show="form.approveStatus" class="group-box">
          <span class="agree mr-15 poros-table-header-required">
            {{ apponit }}
          </span>
          <p-select
            mode="default"
            :value="form.groupCode"
            placeholder="请选择"
            style="width: 300px;"
            @change="handleSelectChange"
          >
            <p-select-option
              v-for="item in groupOptions"
              :key="item.code"
              :value="item.code"
            >
              {{ item.name }}
            </p-select-option>
          </p-select>
          <div v-show="groupCodeRutes.isShow" class="waring">{{ groupCodeRutes.text }}</div>
        </div>
        <!-- prettier-ignore -->
        <p-radio :value="false">
          驳回
        </p-radio>
      </p-radio-group>
    </div>
    <div style="margin-bottom: 10px">
      <p-form-model ref="form" :model="form">
        <p-form-model-item :label="label" prop="approveOpinion">
          <p-textarea v-model="form.approveOpinion" class="textarea" />
          <div v-show="approveOpinionRutes.isShow" class="waring-input">{{ approveOpinionRutes.text }}</div>
        </p-form-model-item>
      </p-form-model>
    </div>
    <div>
      <span class="mr-15" style="float: left"> 抄送人员 </span>
      <SelectSearchPeople
        style="width: 73vw"
        :value="form.makeCopy"
        value-key="email"
        @change="handleChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    disabledRefuse: {
      type: Boolean,
      default: false,
    },
    approve: {
      type: String,
      default: '审批结论',
    },
    label: {
      type: String,
      default: '审批意见',
    },
    apponit: {
      type: String,
      default: '',
    },
    groupOptions: {
      type: Array,
      default: () => [],
    },
    list: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      approveOpinionRutes: {
        isShow: false,
        text: ''
      },
      groupCodeRutes: {
        isShow: false,
        text: ''
      },
      pmShow: true,
      form: {
        approveStatus: '',
        approveOpinion: '',
        makeCopy: [],
        groupCode: '',
        groupName: '',
      },
      rulesComputed: {
        approveOpinion: [
          { max: 255, message: '输入的内容过长', trigger: 'blur' },
        ],
      },
    };
  },
  watch: {
    // 'form.approveStatus': {
    //   handler(val) {
    //     this.$refs.form.clearValidate();
    //     this.pmShow = val;
    //   },
    // },
    list: {
      handler(val) {
        if (val) {
          this.form.groupCode = val
          this.form.groupName
          let nameList = this.groupOptions?.find(item => val === item.code);
          this.form.groupName = nameList?.name
        }
      },
      immediate: true
    },
    'form.approveOpinion': {
      handler(val) {
        if (!val || val.length < 255) {
          this.approveOpinionRutes.isShow = false
          this.approveOpinionRutes.text = ''
        }
        if (val.length > 255) {
          this.approveOpinionRutes.isShow = true
          this.approveOpinionRutes.text = '输入内容过长'
        }
      },
      deep: true,
    },
    'form.groupCode': {
      handler(val) {
        if (val.length) {
          this.groupCodeRutes.isShow = false
          this.groupCodeRutes.text = ''
        }
      },
      deep: true,
    },
  },
  methods: {
    groupCodeValidate() {
      let apponit = this.apponit.substring(2);
      if (!this.form.groupCode.length) {
        this.groupCodeRutes.isShow = true
        this.groupCodeRutes.text = `请选择${apponit}`
      }
    },
    handleChange(val) {
      this.form.makeCopy = val;
    },
    handleSelectChange(val) {
      // console.log(val);
      this.form.groupCode = val;
      let data = this.groupOptions?.find(item => item.code === val);
      this.form.groupName = data.name
      // let nameList = this.groupOptions?.filter(item => val.includes(item.code));
      // this.form.groupName = nameList?.map(v => {
      //   return v.name;
      // });
      // console.log(this.form.name);
    },
    handleRadioChange(e) {
      if (!e.target.value) {
        this.form.groupCode = '';
        this.form.groupName = '';
      }
    },
  },
};
</script>

<style lang="less" scoped>
.approval-container {
  margin-bottom: 20px;
  padding-left: 40px;
  .agree {
    margin-left: -12px;
  }
  .group-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 20px;
  }
  .waring {
    position: absolute;
    top: 30px;
    left: 236px;
    height: 14px;
    color: red;
    font-size: 12px;
    font-weight: 400;
  }
  .waring-input {
    position: absolute;
    top: 16px;
    left: 0px;
    height: 14px;
    color: red;
    font-size: 12px;
    font-weight: 400;
  }
}
.textarea {
  height: 90px !important;
  width: 73vw;
  resize: none;
}
/deep/ textarea.poros-input {
  max-width: 80vw;
}
/deep/ .poros-form-item {
  display: flex;
}
.radio-container {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}
</style>
